<template>
  <view class="bg">
    <view class="box">
      <view class="top">
        <text>销售额</text>
        <el-tag type="success" size="small">今日</el-tag>
      </view>
      <view class="center">
        <animate-number
          ref="now"
          class="now"
          :from="0"
          :to="sales[0]"
          duration="1000"
          easing="easeOutQuad"
          :formatter="formatter"
          :key="sales[0]"
        >
        </animate-number>
        <view class="info">
          <text>昨日 {{ sales[1] }}</text>
          <text class="text">日环比 {{ sales[2] }}%</text>
          <i
            class="el-icon-caret-top"
            style="color: #67c23a"
            v-if="sales[2] > 0"
          ></i>
          <i
            class="el-icon-caret-bottom"
            style="color: #ed4014"
            v-if="sales[2] < 0"
          ></i>
        </view>
      </view>
      <view class="end">
        <text>总销售额</text>
        <text>{{ sales[3] }}元</text>
      </view>
    </view>
    <view class="box">
      <view class="top">
        <text>订单数</text>
        <el-tag type="success" size="small">今日</el-tag>
      </view>
      <view class="center">
        <animate-number
          ref="now"
          class="now"
          :from="count[1]"
          :to="count[0]"
          duration="1000"
          easing="easeOutQuad"
          :key="count[0]"
        >
        </animate-number>
        <!-- <view class="now">{{ count[0] }}</view> -->
        <view class="info">
          <text>昨日 {{ count[1] }}</text>
          <text class="text">日环比 {{ count[2] }}%</text>
          <i
            class="el-icon-caret-top"
            style="color: #67c23a"
            v-if="count[2] > 0"
          ></i>
          <i
            class="el-icon-caret-bottom"
            style="color: #ed4014"
            v-if="count[2] < 0"
          ></i>
        </view>
      </view>
      <view class="end">
        <text>总订单数</text>
        <text>{{ count[3] }}单</text>
      </view>
    </view>
    <view class="box">
      <view class="top">
        <text>用户数量</text>
        <el-tag type="success" size="small">今日</el-tag>
      </view>
      <view class="center">
        <animate-number
          ref="now"
          class="now"
          :from="users[1]"
          :to="users[0]"
          duration="1000"
          easing="easeOutQuad"
          :key="users[0]"
        >
        </animate-number>
        <!-- <view class="now">{{ users[0] }}</view> -->
        <view class="info">
          <text>昨日 {{ users[1] }}</text>
          <text class="text">日环比 {{ users[2] }}%</text>
          <i
            class="el-icon-caret-top"
            style="color: #67c23a"
            v-if="users[2] > 0"
          ></i>
          <i
            class="el-icon-caret-bottom"
            style="color: #ed4014"
            v-if="users[2] < 0"
          ></i>
        </view>
      </view>
      <view class="end">
        <text>总用户</text>
        <text>{{ users[3] }}人</text>
      </view>
    </view>
    <view class="box">
      <view class="top">
        <text>用户访问量</text>
        <el-tag type="success" size="small">今日</el-tag>
      </view>
      <view class="center">
        <animate-number
          ref="now"
          class="now"
          :from="yeyuyuan[1]"
          :to="yeyuyuan[0]"
          duration="1000"
          easing="easeOutQuad"
          :key="yeyuyuan[0]"
        >
        </animate-number>
        <view class="info">
          <text>昨日 {{ yeyuyuan[1] }}</text>
          <text class="text">日环比 {{ yeyuyuan[2] }}%</text>
          <i
            class="el-icon-caret-top"
            style="color: #67c23a"
            v-if="yeyuyuan[2] > 0"
          ></i>
          <i
            class="el-icon-caret-bottom"
            style="color: #ed4014"
            v-if="yeyuyuan[2] < 0"
          ></i>
        </view>
      </view>
      <view class="end">
        <text>总用户访问量</text>
        <text>{{ yeyuyuan[3] }}Pv</text>
      </view>
    </view>
  </view>
</template>

<script>
var vk = uni.vk; // vk实例

export default {
  data() {
    return {
      sales: [0, 0, 0, 0],
      count: [0, 0, 0, 0],
      users: [0, 0, 0, 0],
      shifu: [0, 0, 0, 0],
      yeyuyuan: [0, 0, 0, 0],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    // 环比
    formatter: function (num) {
      return num.toFixed(2);
    },
    compare(a, b) {
      if (a == 0 && b == 0) return 0;
      if (a == 0) return -100;
      if (b == 0) return 100;
      return (((a - b) / b) * 100).toFixed(2);
    },
    // 初始化
    init() {
      let url = "admin/business/kh.stats.getBaseInfoCount";
      vk.callFunction({
        url,
        title: "获取中...",
      }).then((res) => {
        let list = res.list;
        console.log(list);
        this.sales[0] = vk.pubfn.priceFilter(list[0]);
        this.sales[1] = vk.pubfn.priceFilter(list[1]);
        this.sales[2] = this.compare(this.sales[0], this.sales[1]);
        this.sales[3] = vk.pubfn.priceFilter(list[2]);

        this.count[0] = list[3];
        this.count[1] = list[4];
        this.count[2] = this.compare(this.count[0], this.count[1]);
        this.count[3] = list[5];

        this.users[0] = list[6];
        this.users[1] = list[7];
        this.users[2] = this.compare(this.users[0], this.users[1]);
        this.users[3] = list[8];

        this.yeyuyuan[0] = list[9];
        this.yeyuyuan[1] = list[10];
        this.yeyuyuan[2] = this.compare(this.yeyuyuan[0], this.yeyuyuan[1]);
        this.yeyuyuan[3] = list[11];

        this.$forceUpdate();

        // this.count = res.list
        // this.count[2] = this.compare(this.count[0], this.count[1])
        // this.users = res.users
        // this.users[2] = this.compare(this.users[0], this.users[1])
        // this.shifu = res.shifu
        // this.shifu[2] = this.compare(this.shifu[0], this.shifu[1])
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  padding-bottom: 20px;
  display: flex;

  .box {
    margin-right: 20px;
  }

  .box:last-child {
    margin-right: 0;
  }
}

.box {
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
  cursor: default;

  &:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }
}

.top {
  border-bottom: 1px solid #e8eaec;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
}

.center {
  padding: 12px;
  border-bottom: 1px solid #e8eaec;

  .now {
    color: #515a6e;
    font-size: 30px;
    padding-bottom: 10px;
  }

  .info {
    color: #515a6e;
    font-size: 14px;
    margin-top: 10px;
    font-family: "Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,"\5FAE\8F6F\96C5\9ED1",Arial,sans-serif";
  }

  .text {
    margin: 0 10px 0 16px;
  }
}

.end {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  color: #515a6e;
  font-size: 14px;
}
</style>
